<template>
	<view class="quanbu">
		<view class="tapiamg">
			<!-- <image v-if="userInfo.vipName=='白银会员'" src="../../static/newIcon/baiyin1.png" mode="heightFix"></image>
			<image v-if="userInfo.vipName=='黄金会员'" src="../../static/newIcon/huangjin1.png" mode="heightFix"></image>
			<image v-if="userInfo.vipName=='钻石会员'" src="../../static/newIcon/zuanshi1.png" mode="heightFix"></image>
			<image v-if="userInfo.vipName=='黑金会员'"
				src="https://cwjt.oss-cn-beijing.aliyuncs.com/cwjt/heijin1_1730961941155.png" mode="heightFix"></image> -->
			<image
				src="https://cdn4.codesign.qq.com/screen-slices/2024/11/08/AE9KQ24VXEeW11gGYZl08/sagnxczmox0chice/2a0eae11-27d9-42d1-8d24-b89e91fa843f.png?imageMogr2/thumbnail/700x650/interlace/1"
				mode="heightFix"></image>


			<view class="ner">
				<!-- <view class="yueka">
					<text v-if="userInfo.memberMonthCard==null">(未购买月卡)</text>
					<text v-if="userInfo.memberMonthCard!=null">
						<text v-if="userInfo.memberMonthCard.enable">(月卡生效中)</text>
						<text v-else>(月卡已过期)</text>
					</text>
				</view> -->

				<!-- <view class="jif">
					{{userInfo.memberPoint}}积分，升级还差{{userInfo.vipLv}}积分
				</view>
				<view class="qunner">
					{{userInfo.remainderCount}}次权益
				</view> -->
			</view>
		</view>
		<view class="quanyiner">
			<!-- <view class="quanyiner" v-if="osNmae!='ios'"> -->
			<view v-for="item in news" :key="item.id" @click="BuyVip(item)" v-if="osNmae!='ios'" :style="{ 
			  backgroundColor: 
			    userInfo.vipName === '白银会员' ? '#d1dee9' : 
			    userInfo.vipName === '黄金会员' ? '#f5d780' :
			    userInfo.vipName === '钻石会员' ? '#c2e5fb' :
			    userInfo.vipName === '黑金会员' ? '#1f2445' : '',
				color:
				  userInfo.vipName === '白银会员' ? '#8798C8' : 
				  userInfo.vipName === '黄金会员' ? '#E8B95F' :
				  userInfo.vipName === '钻石会员' ? '#6AA8FE' :
				  userInfo.vipName === '黑金会员' ? '#DCC9B2' : ''
			}" class="yige">
				<view class="wam">
					{{item.title}}
				</view>
				<view class="zhonja">
					<view class="daol">
						￥
					</view>
					<view class="jine">
						{{item.amount}}
					</view>
				</view>
				<view class="meic">
					{{item.sortMsg}}
				</view>
			</view>
		</view>
	</view>
	<zdy-tabbar :current-page='1'></zdy-tabbar>
</template>

<script>
	import {
		goodList,
		myMember,
		loadDict,
		takeOrder,
		orderPay
	} from "../../request/api.js"
	export default {
		data() {
			return {
				url: '',
				news: [],
				vipList: [],
				userInfo: {
					vipName: '白银会员',
					memberPoint: 0
				},
				osNmae: '', //判断是否是ios
			}
		},
		onLoad() {
			this.osNmae = uni.getSystemInfoSync().osName //ios不允许虚拟产品
		},
		onShow() {
			if (uni.getSystemInfoSync().platform == "android") {

			}
			if (uni.getStorageSync('userInfo')) {
				this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
				this.huiyuan()
			} else {
				uni.showToast({
					title: '未登录,前往登录...',
					icon: 'none',
					mask: true
				})
				setTimeout(() => {
					uni.switchTab({
						url: "/pages/menu/menu"
					})
				}, 1000)
			}
		},
		methods: {
			BuyVip(e) {
				uni.showLoading({
					title: '购买中..',
					mask: true
				})
				let that = this
				takeOrder(e.id).then(res => {
					console.log(res);
					if (res.success) {
						orderPay({
							memberId: JSON.parse(uni.getStorageSync('userInfo')).id,
							openId: JSON.parse(uni.getStorageSync('userInfo')).openId,
							orderNo: res.result.orderNo,
							payAmount: res.result.amount
						}).then(data => {
							console.log(data);
							// #ifdef APP
							uni.requestPayment({
								"provider": "wxpay",
								"orderInfo": data,
								success: function(res) {
									console.log('success:' + JSON.stringify(res));
									that.huiyuan()
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
								}
							});
							// #endif
							// #ifdef MP-WEIXIN
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: data.result.timeStamp,
								nonceStr: data.result.nonceStr,
								signType: data.result.signType,
								paySign: data.result.paySign,
								package: data.result.packageVal,
								success: function(res) {
									console.log('success:' + JSON.stringify(res));
									that.huiyuan()
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
								}
							});
							// #endif
							uni.hideLoading()
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						uni.hideLoading()
					}
				})
			},
			huiyuan() {
				let that = this
				goodList().then(reb => {
					console.log(reb, '方案');
					this.news = reb.result
				})
				loadDict('member_rank').then(res => {
					console.log(res, '字典');
					that.vipList = res.result
					myMember().then(res => {
						// memberMonthCard == null 未购买月卡  
						// memberMonthCard != null enable==true 就是月卡生效中 false就是已过期  
						that.userInfo = res.result.loginMemberInfo
						that.userInfo.remainderCount = res.result.remainderCount
						that.userInfo.memberMonthCard = res.result.memberMonthCard
						that.vipList.map(data => {
							that.userInfo.vipName = data.title
							if (that.userInfo.memberPoint < data.value) {
								that.userInfo.vipLv = data.value - that.userInfo.memberPoint
								return
							}
						})
						uni.setStorageSync('userInfo', JSON.stringify(that.userInfo));
						console.log(that.userInfo, '会员信息');
					})
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #fafafa;
	}
</style>
<style scoped lang="less">
	.quanbu {
		padding: 20rpx;
	}

	.tapiamg {
		position: relative;
		height: 320rpx;

		image {
			width: 100%;
			height: 324rpx;
		}

		.ner {
			position: absolute;
			left: 50rpx;
			top: 150rpx;

			.huiyuan {
				display: flex;
				align-items: center;

				.yueka {
					width: 168rpx;
					height: 32rpx;

					font-weight: 400;
					font-size: 24rpx;
					color: #440200;
					line-height: 32rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
			}

			.jif {
				font-weight: 400;
				font-size: 24rpx;
				color: #440200;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-top: 22rpx;
			}

			.qunner {
				margin-top: 10rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #7B1000;
				// line-height: 0rpx;
				// text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
	}

	.quanyiner {
		display: flex;
		flex-wrap: wrap;
		width: 702rpx;
		margin: 0 auto;
		margin-top: 32rpx;

		.yige {
			margin-right: 15rpx;
			width: 30%;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			text-align: center;
			margin-bottom: 16rpx;

			.wam {
				padding: 0 10rpx;
				font-weight: 400;
				font-size: 24rpx;
				font-style: normal;
				text-transform: none;
				margin-top: 20rpx;
			}

			.zhonja {
				display: flex;
				justify-content: center;

				.daol {
					font-weight: 500;
					font-size: 24rpx;
					// text-align: center;
					line-height: 60rpx;
					font-style: normal;
					text-transform: none;
				}

				.jine {
					font-weight: 500;
					font-size: 40rpx;
					// text-align: center;
					font-style: normal;
					text-transform: none;
				}
			}

			.meic {
				padding-bottom: 10rpx;
				font-weight: 400;
				font-size: 24rpx;
				font-style: normal;
				text-transform: none;
			}
		}
	}
</style>